<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">活动发布</view>
		<uni-card class="card">
			<uni-section>
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" style="border-radius: 80rpx;" />
				</view>
				<view class="content">
					<view v-if="current === 0">
						<view class="items" v-for="(item,index) in formdatahuodong" :key="index">
							<view class="items_left"  @click="goXiangQing(item.id)">
								<view class="items_left_top">
								<view>{{item.title}}</view>
								</view>
								<view class="items_left_bottom">
									{{item.time}}
								</view>
							</view>
							<view class="items_right">
								<button @click="xiajia(item.id)">下架</button>
							</view>
						</view>
					</view>
					<view v-if="current === 1">
						<view class="items2" v-for="(item,index) in weifabulist" :key="index">
							<view class="items_left"   @click="goXiangQing(item.id)">
								<view class="items_left_top">
									<view>{{item.title}}</view>
								</view>
								<view class="items_left_mid" style="color: red;">
									审核中
								</view>
								<view class="items_left_bottom">
									<view>{{item.time}}</view>
								</view>
							</view>
							<view class="items_right" >
								<button @click.stop="delyishenhe(item.id)">删除</button>
							</view>
						</view>
					</view>
				</view>
			</uni-section>
		</uni-card>
		<button class="bottom" @click="goFabu">
			<image src="/static/加号@3x.png"></image>
			发布活动
		</button>

	</view>

</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
import request from '../../util/request';
import baseUrl from '../../util/urlConfig';

	// 定义响应式数据
	const items = ref(['已上架', '未上架']);

	const current = ref(0);
	const colorIndex = ref(0);
	const activeColor = ref('#007aff');
	const styleType = ref('button');

	function backPage() {
		uni.navigateBack()
	}
	const goXiangQing = (e) => {
		// console.log(e)
		uni.navigateTo({
			url: `/pages/index/huodong/fabuxiangqing/fabuxiangqing?e=${e}`
		})
	}
	// 定义方法
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
			chaxun22()
		}
	};

	const styleChange = (e) => {
		if (styleType.value !== e.detail.value) {
			styleType.value = e.detail.value;
		}
	};

	const colorChange = (e) => {
		if (styleType.value !== e.detail.value) {
			console.log(e.detail.value);
			activeColor.value = e.detail.value;
		}
	};
	const goFabu = () => {
		uni.navigateTo({
			url: '/pages/index/huodong/fabu/fabu'
		})
	};

	
	const formdatahuodong = ref({
		    id: '',
		    title: '',
		    mid: '',
		    time: '',
		    img: '',
		    content: '',
		    endTime: '',
		    telephone: '',
		    num: 0,
		    sendStatus: 0,
		    shenheStatus: 0,
		    status: 0
	})
	const bendishangjia = uni.getStorageSync('merchant');
	const chaxunid = bendishangjia.id
	console.log(bendishangjia)
	//查询已上架
	const chaxunall = (e)=>{
		request({
			url: baseUrl + '/ly/activities/list1',
			method:"GET",
			success(res){
				console.log(res.data)
				formdatahuodong.value=res.data.rows
			},
			fail(res){
				console.log(err)
			}
		})
	}
	
	
	
//下架单个活动
		const xiajia = (id) =>{
			request({
				url:baseUrl+'/ly/activities/xiajia/'+id,
				method:"PUT",
				
				success(res){
					uni.showToast({
					  title: '下架成功',
					  icon: 'success',
					});
					chaxunall()
				},
				
				fail(err){
					console.log('删除失败', err);
					uni.showToast({
					  title: '下架失败',
					  icon: 'error'
					});
				}
			})
			
		}
	// 删除已下架
	const delyishenhe = (id) => {  // 接收id参数
	  request({
	    url: baseUrl+'/ly/activities/'+id,  // 将id作为查询参数
	    // 或者 RESTful 风格: `${baseUrl}/ly/activities/byid/${id}`
	    method: "DELETE",
	    success(res) {
	      console.log('删除成功', res);
	      // 删除成功后刷新列表
	      chaxunall();
	      uni.showToast({
	        title: '删除成功',
	        icon: 'success'
	      });
		  chaxun22()
	    },
	    fail(err) {
	      console.log('删除失败', err);
	      uni.showToast({
	        title: '删除失败',
	        icon: 'error'
	      });
	    }
	  })
	}
	//查询未上架
	const weifabulist = ref([])
	const chaxun22 =()=>{
		request({
		url: baseUrl + '/ly/activities/list2',
		method:"GET",
		success(res){
			console.log(res.data)
			weifabulist.value=res.data.rows
			},
			fail(res){
				console.log(err)
			}
			})
	}
	//删除
	onMounted(()=>{
		chaxunall();
		chaxun22()
	})
	
</script>

<style scoped>
	@import url('@/common/app.css');

	.card {
		margin: 0;

		height: 1200rpx;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		padding: 0px 30px;
	}

	.content {}

	.items {
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 50rpx 0;
		border-bottom: 1px solid lightgrey;
	}

	.items_left_top {
		color: black;
		margin-bottom: 10rpx;
	}

	.items_left_mid {

		margin-bottom: 10rpx;
	}

	.items_right button {
		color: white;
		font-size: 24rpx;
		background-color: #0863e7;
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
	}

	image {
		width: 25rpx;
		height: 25rpx;
	}

	.bottom {
		color: white;
		background-color: #0863e7;
		width: 500rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 100rpx;
		position: fixed;
		bottom: 100rpx;
		left: 125rpx;
		font-size: 30rpx;
	}

	.items2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 50rpx 0;
		border-bottom: 1px solid lightgrey;
	}

	.back-btn {
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
		position: relative;
	}

	.back-icon {
		width: 30px;
		height: 30px;
	}

	.back-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #fff;
		top: 80rpx;
		left: 47rpx;
		transform: translate(-50%, -50%);
	}

	.back-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 70rpx;
		left: 30rpx;
	}
</style>